import cn from 'classnames';

import React from 'react';
import PropTypes from 'prop-types';

import { percent } from '../../../../../../common/formatter';
import Progress from '../../../../../components/Progress';

import s from './style.module.css';

function Bar({ className, abnormalCounts, total }) {
	const normalCounts = total - abnormalCounts;

	return (
		<div className={cn(className, s.bar)}>
			<section className={s.abnormal}>
				<label>
					异常网站数<span className={s.count}>{abnormalCounts}</span>
				</label>
				<Progress
					className={s.percent}
					percent={percent(abnormalCounts / total)}
				/>
			</section>
			<section className={s.normal}>
				<label>
					正常网站数<span className={s.count}>{normalCounts}</span>
				</label>
				<Progress
					className={s.percent}
					percent={percent(normalCounts / total)}
				/>
			</section>
		</div>
	);
}

Bar.propTypes = {
	className: PropTypes.string,
	abnormalCounts: PropTypes.number.isRequired,
	total: PropTypes.number.isRequired,
};
Bar.defaultProps = {
	className: s.vulTypeCounts,
	abnormalCounts: 0,
	total: 0,
};

export default Bar;
